<template>
    <view class="content">
        <view class="top">
			<view class="info">{{data.nickname}}(NO.{{data.card_no}})</view>
			<view>
				{{data.end_time}}到期
				<text v-if="year">，购买后有效期将延期{{ year }}年</text>
			</view>
		</view>
		<view class="wrapper">
			<view class="tit">延长健康管理卡权益有效期</view>
			<view class="box">
				<view class="item" :class="{activeBg : goods_id != item.id}" v-for="(item,index) in list" :key="index"
					@click="choose(item)">
					<image src="../../static/image/bg_2.png" class="bg-2" v-if="goods_id == item.id"></image>
					<!-- is_recommend=1 推荐 -->
					<image src="../../static/image/tj.png" class="tj" v-if="item.is_recommend == 1"></image>
					<view class="item-cen">
						<view>续费{{item.year}}年</view>
						<view class="price">
							￥<text>{{item.sale_price}}</text>
						</view>
						<view class="o-price">原价{{item.original_price}}元</view>
						<view :class="{activeNum : goods_id == item.id}">体验次数+{{item.exam_nums}}</view>
					</view>
				</view>
			</view>
			
			<view class="tip">
				<u-icon name="error-circle-fill" color="#8b99ae" size="30" class="u-m-r-8"></u-icon>
				此卡根据您续费的年限增加相应体检次数
			</view>
			
			<view class="code border-b">
				<view>使用优惠码</view>
				<u-icon name="arrow-right" color="#a9a9a9" size="28"></u-icon>
			</view>
			<view class="code">
				<view>输入优惠码</view>
				<u-message-input mode="box" :value="code" :maxlength="6" width="60" :disabled-keyboard="disabled"
					@finish="finish"></u-message-input>
			</view>
			<view class="time">{{tip}}</view>
			
			<view class="btn" @click="doSubmit">{{btnText}}</view>
		</view>
		
		<u-mask :show="show" mode="center" border-radius="30">
		    <view class="popup">
		        <view class="win-box3">
		            <view class="pop-up2">
		                <view class="pop-tit">使用优惠码</view>
						<view>
							<scroll-view scroll-y="true" style="height:400rpx;">
								<view class="pop-text">
									检查有无中耳炎、鼻炎、慢性扁桃体炎、鼻中隔偏曲、咽喉炎、鼻咽肿物等疾病
								</view>
							</scroll-view>
						</view>
		            </view>
		            <image src="/static/icon/close.png" class="pop-del" @click="show = false"></image>
		        </view>
		    </view>
		</u-mask>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				show: false,
				code: '',
				disabled: false,
				list: [],
				btnText: '立即充值',
				goods_id: '',
				card_id: '',
				data: {},
				year: '',
				sale_price: '',
				tip: '',
            };
        },
		onLoad(option) {
		    if (option.card_id) {
				this.card_id = option.card_id
			}
			this.getList()
			this.getData()
		},
        methods: {
			doSubmit() {
				if (!this.goods_id) {
					this.$toast('请选择续费产品')
					return
				}
				this.$ajax('add_renew', {
				    userToken: this.$getSync('userToken'),
					card_id: this.card_id,//健康卡号
					coupon: this.code,//优惠码
					goods_id: this.goods_id,//续费产品编号
				}).then(ret => {
					if (ret.status == 0) {
						let data = {
							id: ret.data.pay_id,
							money: ret.data.pay_amount,
							token: this.$getSync('userToken'),
						}
						this.$gTo(`/pages/pay/pay?data=${JSON.stringify(data)}`)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
            choose(item) {
				if (this.goods_id == item.id) return
				this.code = ''
				this.tip = ''
				this.goods_id = item.id
				this.year = item.year
				this.sale_price = item.sale_price
				this.btnText = `立即充值${item.original_price}元，延长${item.year}年有效期`
			},
			
			finish(e) {
				console.log('输入结束，当前值为：' + e);
				this.$ajax('check_coupon', {
				    userToken: this.$getSync('userToken'),
					coupon: e,
				}).then(ret => {
					if (ret.status == 0) {
				        this.code = e
						this.btnText = `立即充值${this.sale_price}元，延长${this.year}年有效期`
					} else {
						this.tip = ret.message
					}
				});
			},
			
			getList() {
				this.$ajax('get_renew', {
				    userToken: this.$getSync('userToken'),
					type: 2,//1-新购 2-续费
				}).then(ret => {
					if (ret.status == 0) {
				        this.list = ret.data
						this.list.forEach(cur => {
							this.$set(cur, 'isSelect', false)
						})
						this.goods_id = this.list[0].id
						this.year = this.list[0].year
						this.sale_price = this.list[0].sale_price
						this.btnText = `立即充值${this.list[0].original_price}元，延长${this.list[0].year}年有效期`
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getData() {
				this.$ajax('get_cards_detail', {
				    userToken: this.$getSync('userToken'),
					card_id: this.card_id,
				}).then(ret => {
					if (ret.status == 0) {
				        this.data = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
	.time{
		padding: 16rpx 0;
		font-size: 24rpx;
		color: #ff8929;
		text-align: center;
	}
	
	
    page{
        background-color: #fff;
    }
	.top{
		background-color: #01b6bc;
		padding: 40rpx 20rpx 70rpx;
		font-size: 26rpx;
		color: #fff;
	}
	.info{
		font-size: 32rpx;
	}
	.wrapper{
		width: 750rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 40rpx 18rpx;
		margin-top: -30rpx;
	}
	.tit{
		padding-bottom: 50rpx;
		padding-left: 16rpx;
		font-size: 26rpx;
	}
	
	.box{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.item{
		width: 225rpx;
		height: 288rpx;
		font-size: 28rpx;
		color: #9f5500;
		margin-right: 18rpx;
		margin-bottom: 18rpx;
		position: relative;
	}
	.item:nth-child(3n) {
		margin-right: 0;
	}
	.activeBg{
		color: #000;
		background-color: #fefcf4;
		border: 2rpx solid #ffe8ad;
		border-radius: 20rpx;
		box-sizing: border-box;
	}
	.bg-2{
		width: 225rpx;
		height: 288rpx;
	}
	.tj{
		width: 94rpx;
		height: 41rpx;
		position: absolute;
		top: -15rpx;
		left: 0;
	}
	.item-cen{
		width: 225rpx;
		height: 288rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
	}
	.price{
		font-size: 31rpx;
		padding: 26rpx 0 0;
	}
	.price>text{
		font-size: 46rpx;
		font-weight: bold;
	}
	.o-price{
		color: #7f7f7f;
		padding-bottom: 10rpx;
	}
	.activeNum{
		width: 225rpx;
		text-align: center;
		position: absolute;
		bottom: 10rpx;
		left: 0;
	}
	
	.tip{
		padding: 20rpx 0 35rpx;
		font-size: 24rpx;
		color: #8b99ae;
	}
	
	.code{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 0;
		font-size: 28rpx;
	}
	.border-b{
		border-bottom: 2rpx solid #e6e6e6;
	}
	
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin: 70rpx 0;
		background: #01b8bd;
		border-radius: 50rpx;
	}
	
	.popup {
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.win-box3 {
	    width: 616rpx;
	    background: #fff;
	    border-radius: 30rpx;
		position: relative;
	}
	.pop-up2{
		width: 616rpx;
		padding: 50rpx 40rpx;
	}
	.pop-tit{
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		padding-bottom: 30rpx;
	}
	.pop-text{
		font-size: 28rpx;
		overflow: hidden;
	}
	
	.pop-del {
	    width: 7vw;
	    height: 7vw;
	    position: absolute;
	    left: 38vw;
	    bottom: -100upx;
	}

</style>
